<template>
	<view class="box">
		<view class="list">
			<template v-for="(item,index) of problems.topic">
				<!-- 单选 -->
				<view class="demo" :key="index" v-if="item.type=='radio'">
					<view class="title">
						{{index+1}}、{{item.problem + (item.type=='radio'?'(单选)':item.type=='checkbox'?'(多选)':'') }}
					</view>
					<u-radio-group placement="column" activeColor="#22B591" v-model='item.answer'>
						<u-radio :customStyle="{marginBottom: '20px'}" v-for="(key,val) in item.option" :key="val"
							:label="key" :name="val">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 多选 -->
				<view class="demo" v-if="item.type=='checkbox'" :key="index">
					<view class="title">
						{{index+1}}、{{item.problem + (item.type=='radio'?'(单选)':item.type=='checkbox'?'(多选)':'') }}
					</view>
					<u-checkbox-group v-model='item.answer' placement="column" activeColor="#22B591" shape="circle">
						<u-checkbox :customStyle="{marginBottom: '20px'}" v-for="(key,val) in item.option" :key="val"
							:label="key" :name="val" shape="circle">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<!-- 填写内容 -->
				<view class="demo" v-if="item.type=='textarea'" :key="index">
					<view class="title">
						{{index+1}}、{{item.problem }}
					</view>
					<view>
						<textarea v-model="item.answer" placeholder="请输入您对我们的意见或建议" maxlength="500" />
					</view>
				</view>
			</template>
		</view>
		<!-- 提交 -->
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orign: '', //满汉任务
				problems: [], //
				index: 0,
				id: 0,
				// 基本案列数据
				sendData: {
					radio: '',
					checkbox: [], //
					content: '', //建议
				}, //提交数据
			}
		},
		onLoad(options) {
			if (options.orign) {
				this.orign = options.orign
			}
			this.index = options.index
			this.id = options.id
			this.gettm()
		},
		methods: {
			//  获取题目
			gettm() {
				this.$request('questionnaire/list', {
					page: 1,
					is_new: 1,
					limit: 200,
					// is_new:1
				}, 'GET').then(res => {
					let data = {}
					if (this.index) {
						data = res.data[this.index]
						res.data[this.index].topic.forEach(item => {
							if (item.type != 'checkbox') {
								item.answer = ''
							} else {
								item.answer = []
							}
						})
					}
					if (this.id) {
						res.data.forEach(item => {
							if (item.group_data_id == this.id) {
								data = item
							}
						})
						data.topic.forEach(item => {
							if (item.type != 'checkbox') {
								item.answer = ''
							} else {
								item.answer = []
							}
						})
					}
					this.problems = data
				})
			},
			// 单选--需要验证多个数组时传值问题
			groupChange(e, index) {
				// console.log(e,index);
			},
			// 提交
			submit() {
				uni.showLoading({
					title: "提交中",
				})
				let data = this.problems
				data.topic.forEach(topic => {
					switch (topic.type) {
						case 'radio':
							let radioKey = topic.answer
							topic.answer = {}
							topic.answer[radioKey] = radioKey
							break;
						case 'checkbox':
							let d = {}
							topic.answer.forEach(choice => {
								d[choice] = choice
							})
							topic.answer = JSON.parse(JSON.stringify(d))
							break;
						default:
					}
					console.log(topic)
				})
				data.answer_history = []
				this.$request('questionnaire/answer', data).then(res => {
					if (res.status == 200) {
						if (this.orign) {
							uni.redirectTo({
								url: '/pages/state/success/success'
							})
						} else {
							uni.redirectTo({
								url: '/pages/state/success/success?type=11'
							})
						}
					}

				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.list {
			padding: 0 30rpx 124rpx;

			&>view:not(:first-child) {
				border-top: 1rpx solid #eee;
			}

			.demo {
				padding: 24rpx 0 0;

				.title {
					margin-bottom: 40rpx;
				}

				textarea {
					width: 690rpx;
					height: 240rpx;
					padding: 18rpx 24rpx;
					background: #F7F7F7;
					box-sizing: border-box;
				}
			}
		}

		.btn {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background: linear-gradient(64deg, #2BCCA5, #22B591);
			z-index: 11;
		}
	}
</style>
